<style>
	.CodeMirror { 
		text-align: left !important;
		font-size: 15px;
		line-height: 150%;
		resize: both !important;
	}
	.CodeMirror-merge {
		border: none !important;
	}
	.CodeMirror-merge-r-chunk {
    	background: #0095ff2e !important;
	}
	.CodeMirror-merge-2pane .CodeMirror-merge-gap {
		height: 700px !important;
	}
	.CodeMirror-merge-r-connect {
		fill: #0095ff2e !important;
		stroke: #0095ff2e !important;
	}
	.CodeMirror-vscrollbar-oc {
		display: none !important;
	}
	.CodeMirror, .CodeMirror-line {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
		word-break: break-all !important;
		overflow-wrap: break-word !important;
	}
	:root[data-darkmode="true"] .CodeMirror-merge-gap {
		background: #d0cfcf !important;
	}
</style>
<link rel="stylesheet" href="/luci-static/resources/openclash/lib/codemirror.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/theme/material.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/theme/material-log.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/theme/idea.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/fold/foldgutter.css"/>
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/lint/lint.css">
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/display/fullscreen.css">
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/dialog/dialog.css">
<link rel="stylesheet" href="/luci-static/resources/openclash/addon/search/matchesonscrollbar.css">
<script src="/luci-static/resources/openclash/lib/codemirror.js"></script>
<script src="/luci-static/resources/openclash/mode/yaml/yaml.js"></script>
<script src="/luci-static/resources/openclash/mode/lua/lua.js"></script>
<script src="/luci-static/resources/openclash/mode/shell/shell.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/foldcode.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/foldgutter.js"></script>
<script src="/luci-static/resources/openclash/addon/fold/indent-fold.js"></script>
<script src="/luci-static/resources/openclash/addon/edit/matchbrackets.js"></script>
<script src="/luci-static/resources/openclash/addon/selection/active-line.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/lint.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/yaml-lint.js"></script>
<script src="/luci-static/resources/openclash/addon/lint/js-yaml.min.js"></script>
<script src="/luci-static/resources/openclash/addon/display/fullscreen.js"></script>
<script src="/luci-static/resources/openclash/addon/display/autorefresh.js"></script>
<script src="/luci-static/resources/openclash/addon/dialog/dialog.js"></script>
<script src="/luci-static/resources/openclash/addon/search/searchcursor.js"></script>
<script src="/luci-static/resources/openclash/addon/search/search.js"></script>
<script src="/luci-static/resources/openclash/addon/scroll/annotatescrollbar.js"></script>
<script src="/luci-static/resources/openclash/addon/search/matchesonscrollbar.js"></script>
<script src="/luci-static/resources/openclash/addon/search/jump-to-line.js"></script>
<script src="/luci-static/resources/openclash/addon/merge/diff_match_patch.js"></script>
<script src="/luci-static/resources/openclash/addon/merge/merge.js"></script>
<link rel=stylesheet href="/luci-static/resources/openclash/addon/merge/merge.css">

<%-
local uci = require("luci.model.uci").cursor()
local fs = require "luci.openclash"
local conf = fs.uci_get_config("config", "config_path")
if not conf then conf = "/etc/openclash/config/config.yaml" end
local conf_name = fs.basename(conf)
if not conf_name then conf_name = "config.yaml"  end
local sconf = "/etc/openclash/"..conf_name
-%>

<table id="my_editor_div" style="width: 100%; text-align: center; display: none;">
<tr>
	<td style="width: 50%; overflow: hidden;"><%:Modify Your Config file:%> <b style=color:green><%=conf_name%></b> <%:Here, Except The Settings That Were Taken Over%></td>
	
<%-
	if fs.isfile(sconf) then
-%>
		<td style="width: 50%; overflow: hidden;"><%:Config File Edited By OpenClash For Running%></td>
<%-
	else
-%>
		<td style="width: 50%; overflow: hidden;"><%:Default Config File With Correct Template%></td>
<%-
	end
-%>
</tr>
</table>

<script type="text/javascript">//<![CDATA[

function isDarkBackground(element) {
	var cachedTheme = localStorage.getItem('oc-theme');
	if (cachedTheme === 'dark') {
		return true;
	} else if (cachedTheme === 'light') {
		return false;
	}

	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
		return true;
	}

	var style = window.getComputedStyle(element);
	var bgColor = style.backgroundColor;
	let r, g, b;
	if (/rgb\(/.test(bgColor)) {
		var rgb = bgColor.match(/\d+/g);
		r = parseInt(rgb);
		g = parseInt(rgb);
		b = parseInt(rgb);
	} else if (/#/.test(bgColor)) {
		if (bgColor.length === 4) {
		r = parseInt(bgColor + bgColor, 16);
		g = parseInt(bgColor + bgColor, 16);
		b = parseInt(bgColor + bgColor, 16);
		} else {
		r = parseInt(bgColor.slice(1, 3), 16);
		g = parseInt(bgColor.slice(3, 5), 16);
		b = parseInt(bgColor.slice(5, 7), 16);
		}
	} else {
		return false;
	}
	var luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
	return luminance < 128;
};

function merge_editor(id, id2, target, target2, readOnly, readOnly2, wid, height)
{
	var value, orig1, orig2, merge_editor, descr, gap, vscrollbar, vscrollbar_oc, panes = 2, highlight = true, connect = null, collapse = false;
	descr = document.getElementById("my_editor_div");
	target.parentNode.parentNode.parentNode.insertBefore(descr, target.parentNode.parentNode); 
	descr.style.display="inline-table"
	value = id.value;
	if (value == null) {
		editor(id, readOnly, wid, height);
		editor(id2, readOnly2, wid, height);
	}
	else {
		target2.parentNode.style.display="none";
		orig1 = '';
		orig2 = id2.value;
		target.style.height= "700px"
		id.style.display = "none";
		id2.style.display = "none";
		merge_editor = CodeMirror.MergeView(target, {
			mode: "text/yaml",
			value: value,
			origLeft: panes == 3 ? orig1 : null,
			orig: orig2,
			theme: "material",
			lineNumbers: true,
			autoRefresh: true,
			styleActiveLine: true,
			lineWrapping: true,
			matchBrackets: true,
			foldGutter: true,
			lint: true,
			highlightDifferences: highlight,
			connect: connect,
			collapseIdentical: collapse,
			gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
			extraKeys: {
				"F10": function() {
					merge_editor.setShowDifferences(highlight = !highlight);
				},
				"F11": function(cm) {
					cm.setOption("fullScreen", !cm.getOption("fullScreen"));
					gap = document.getElementsByClassName("CodeMirror-merge-gap")[0];
					vscrollbar = document.getElementsByClassName("CodeMirror-vscrollbar")[0];
					vscrollbar_oc = document.getElementsByClassName("CodeMirror-vscrollbar-oc")[0];
					if (cm.getOption("fullScreen")) {
						console.log(gap.style.display)
						gap.style.display = "none";
						vscrollbar.className = "CodeMirror-vscrollbar-oc";
					}
					else {
						gap.style.display = "";
						vscrollbar_oc.className = "CodeMirror-vscrollbar";
					};
				},
				"Esc": function(cm) {
					gap = document.getElementsByClassName("CodeMirror-merge-gap")[0];
					vscrollbar = document.getElementsByClassName("CodeMirror-vscrollbar")[0];
					vscrollbar_oc = document.getElementsByClassName("CodeMirror-vscrollbar-oc")[0];
					if (cm.getOption("fullScreen")) {
						cm.setOption("fullScreen", false);
						gap.style.display = "";
						vscrollbar_oc.className = "CodeMirror-vscrollbar";
					};
				},
				"Tab": function(cm) {
					if (cm.somethingSelected()) {
						cm.indentSelection('add')
					} else {
						var spaces = Array(cm.getOption("indentUnit") + 1).join(" ")
						cm.replaceSelection(spaces)
					}
				}
			}
		});

		merge_editor.edit.on("change", function(cm) {
            id.value = cm.getValue();
        });

		if (wid && height) {
			merge_editor.editor().setSize(wid, height);
			merge_editor.rightOriginal().setSize(wid, height);
		};
	};
};

function editor(id, readOnly, wid, height)
{
	var editor = CodeMirror.fromTextArea(id, {
	mode: "text/yaml",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "material",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	lint: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        },
        "Tab": function(cm) {
				   if (cm.somethingSelected()) {
              cm.indentSelection('add')
           } else {
              var spaces = Array(cm.getOption("indentUnit") + 1).join(" ")
              cm.replaceSelection(spaces)
           }
        }
      }
	});
	
	if (readOnly == "true") {
		editor.setOption("readOnly","true");
	};
	
	if (wid && height) {
		editor.setSize(wid, height);
	};
};

function shell_editor(id, readOnly, wid, height)
{
	var editor = CodeMirror.fromTextArea(id, {
	mode: "shell",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "material",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        },
        "Tab": function(cm) {
           if (cm.somethingSelected()) {
              cm.indentSelection('add')
           } else {
              var spaces = Array(cm.getOption("indentUnit") + 1).join(" ")
              cm.replaceSelection(spaces)
           }
        }
      }
	});

	if (wid && height) {
		editor.setSize(wid, height);
	};
};

function other_editor(id, readOnly, wid, height)
{
	var editor = CodeMirror.fromTextArea(id, {
	mode: "lua",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "material",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        },
        "Tab": function(cm) {
           if (cm.somethingSelected()) {
              cm.indentSelection('add')
           } else {
              var spaces = Array(cm.getOption("indentUnit") + 1).join(" ")
              cm.replaceSelection(spaces)
           }
        }
      }
	});

	if (wid && height) {
		editor.setSize(wid, height);
	};
};

function other_log_area(id, readOnly, wid, height)
{
	var other_log_area = CodeMirror.fromTextArea(id, {
	mode: "lua",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "idea",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      }
	});
	
	if (readOnly == "true") {
		other_log_area.setOption("readOnly","true");
	};
	
	if (wid && height) {
		other_log_area.setSize(wid, height);
	};
	
	other_log_area.markText({line:0,ch:0},{line:9999,ch:9999}, {css: 'font-size:13px'});
};

var custom_cfg_value = document.getElementById("cbid.openclash." + window.location.pathname.split("/")[window.location.pathname.split("/").length - 1] + ".other_parameters");
if (custom_cfg_value) {
	editor(custom_cfg_value, 'false', '100%', '300px');
};

var custom_firewall = document.getElementById("cbid.openclash.config.firewall_custom");
var custom_ymchange = document.getElementById("cbid.openclash.config.ymchange_custom");
if (custom_firewall) {
	shell_editor(custom_firewall, 'false', "100%", '300px');
};

if (custom_ymchange) {
	shell_editor(custom_ymchange, 'false', "100%", '300px');
};

var myEditor_use = document.getElementById("cbid.table.1.user");
var myEditor_def = document.getElementById("cbid.table.1.default");

if (myEditor_use && myEditor_def) {
	var myEditor_div_use = document.getElementById("cbi-table-1-user");
	var myEditor_div_def = document.getElementById("cbi-table-1-default");
	
	myEditor_div_def.parentNode.parentNode.style.cssText="text-align: left !important"
	myEditor_div_def.parentNode.className='cbi-value';
	myEditor_div_def.parentNode.style.display="revert"
	myEditor_div_def.parentNode.style.width="100%"

	myEditor_div_use.parentNode.className='cbi-value';
	myEditor_div_use.parentNode.style.display="revert"
	myEditor_div_use.parentNode.style.width="100%"
	merge_editor(myEditor_use, myEditor_def, myEditor_div_use, myEditor_div_def, 'true', 'false', 'auto', '700px');
};

var myEditor_hosts = document.getElementById("cbid.openclash.config.custom_hosts");
var myEditor_fall_fil = document.getElementById("cbid.openclash.config.custom_fallback_fil");
var myEditor_name_pol = document.getElementById("cbid.openclash.config.custom_domain_dns_core");
var myEditor_name_cus_r1 = document.getElementById("cbid.openclash.config.custom_rules_2");
var myEditor_name_cus_r2 = document.getElementById("cbid.openclash.config.custom_rules");
var myEditor_fake_filter = document.getElementById("cbid.openclash.config.custom_fake_filter");
var myEditor_custom_domain_dns = document.getElementById("cbid.openclash.config.custom_domain_dns");
var myEditor_edit_file = document.getElementById("cbid.openclash.config.edit_file");
var myEditor_custom_sniffer = document.getElementById("cbid.openclash.config.sniffer_custom");

if (myEditor_hosts) {
	editor(myEditor_hosts, 'false', '100%', '300px');
};

if (myEditor_edit_file) {
	editor(myEditor_edit_file, 'false', '100%', '700px');
};

if (myEditor_fall_fil) {
	editor(myEditor_fall_fil, 'false', '100%', '300px');
};

if (myEditor_name_pol) {
	editor(myEditor_name_pol, 'false', '100%', '300px');
};

if (myEditor_name_cus_r1) {
	editor(myEditor_name_cus_r1, 'false', '100%', '300px');
	editor(myEditor_name_cus_r2, 'false', '100%', '300px');
};

if (myEditor_fake_filter) {
	other_editor(myEditor_fake_filter, 'false', '100%', '300px');
};

if (myEditor_custom_domain_dns) {
	other_editor(myEditor_custom_domain_dns, 'false', '100%', '300px');
};

if (myEditor_custom_sniffer) {
	other_editor(myEditor_custom_sniffer, 'false', '100%', '300px');
};

var core_log = document.getElementById("core_log");
var oc_log = document.getElementById("cbid.openclash.config.clog");
if (core_log && oc_log) {
	var core_editor = CodeMirror.fromTextArea(core_log, {
	mode: "lua",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "idea",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      }
	});
	
	var oc_editor = CodeMirror.fromTextArea(oc_log, {
	mode: "lua",
	autoRefresh: true,
	styleActiveLine: true,
	lineNumbers: true,
	theme: "idea",
	lineWrapping: true,
	matchBrackets: true,
	foldGutter: true,
	gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	extraKeys: {
        "F11": function(cm) {
          cm.setOption("fullScreen", !cm.getOption("fullScreen"));
        },
        "Esc": function(cm) {
          if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
        }
      }
	});
	core_editor.setSize("100%", "540px");
	core_editor.setOption("readOnly","true");
	oc_editor.setSize("100%", "540px");
	oc_editor.setOption("readOnly","true");
	if (isDarkBackground(document.body)) {
		core_editor.setOption('theme', 'material-log');
		oc_editor.setOption('theme', 'material-log');
		document.documentElement.setAttribute('data-darkmode', 'true');
	};
};

var proxy_mg = document.getElementById('cbi-table-1-proxy_mg');
var rule_mg = document.getElementById('cbi-table-1-rule_mg');
var game_mg = document.getElementById('cbi-table-1-game_mg');
var Commit = document.getElementById('cbi-table-1-Commit');
var Apply = document.getElementById('cbi-table-1-Apply');
var Create = document.getElementById('cbi-table-1-Create');

if (proxy_mg) {
	proxy_mg.style.textAlign="center";
	rule_mg.style.textAlign="center";
	game_mg.style.textAlign="center";
	Commit.style.textAlign="center";
	Apply.style.textAlign="center";
	Create.style.textAlign="center";
};
//]]>
</script> 